<template>
  <div class="home">
    <!-- 页头 -->
    <my-navbar> </my-navbar>
    <!-- 底部标签栏 -->
    <my-tabbar></my-tabbar>

    <van-tabs
      class="tabs"
      v-model="active"
      line-width="20px"
      duration="0"
      sticky
      offset-top="46"
    >
      <van-tab title="关注">
        <div class="attentionList">
          <!-- 头像与昵称 -->
          <van-row class="head">
            <van-col span="22">
              <van-image
                round
                width="2.5rem"
                height="2.5rem"
                :src="authorimg"
                class="authorimg"
              />
              <span class="nicheng">{{ uname }}</span>
            </van-col>
            <van-col span="2">
              <img src="../assets/more.png" alt="" @click="showMore = true" />
            </van-col>
          </van-row>

          <!-- 作品内容 -->
          <van-row class="main">
            <div class="text">{{ text }}</div>
          </van-row>
          <!-- 作品图片 -->
          <img
            :src="`${item}`"
            alt=""
            class="workImg"
            v-for="(item, i) in worksImg"
            :key="i"
          />

          <!-- 点赞与评论 -->
          <van-row class="dianping">
            <van-col span="6">
              <img
                v-if="i % 2 == 0"
                @click="dianzan()"
                src="http://qxkmdhmin.hn-bkt.clouddn.com/dianzan.png"
                alt=""
                class="dianzan"
              />
              <img
                v-else
                @click="dianzan()"
                src="http://qxkmdhmin.hn-bkt.clouddn.com/dianzan2.png"
                alt=""
              />
              <span>赞</span>
            </van-col>
            <van-col span="6">
              <img src="../assets/comment.png" alt="" />
              <span>评论</span>
            </van-col>
          </van-row>
          <div class="comment">
            <van-col span="2">
              <van-image
                round
                width="2.5rem"
                height="2.5rem"
                :src="myimg"
                class="myimg"
              />
            </van-col>
            <van-col span="" offset="1" class="write" @click="write">
              <input type="text" placeholder="写评论..." />
              <img src="../assets/heart.png" alt="" class="heart" />
              <img src="../assets/applause.png" alt="" class="applause" />
            </van-col>
          </div>

          <!-- 弹框区域,使用遮罩层-->
          <van-overlay :show="showMore" @click="showMore = false" z-index="100">
            <div class="dialog" @click.stop>
              <h3 class="more">更多</h3>
              <div class="dialog_item" @click="del()">
                <div class="delete">删除</div>
              </div>
              <div
                class="dialog_item"
                @click="(showShare = true), (showMore = false)"
              >
                <div class="share">分享作品</div>
              </div>
              <div class="dialog_item" @click="edit()">
                <div class="edit">编辑</div>
              </div>
              <div class="dialog_item">
                <div class="cancel" @click="cancel()">取消</div>
              </div>
            </div>
          </van-overlay>

          <van-share-sheet v-model="showShare" title="" :options="options" />
        </div>
      </van-tab>
      <van-tab title="推荐">内容 2</van-tab>
      <van-tab title="分类">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      active: 0,
      authorimg: "https://img01.yzcdn.cn/vant/cat.jpeg",
      uname: "衣者涵镜",
      text: "hahhahhhhhdfgdfgfgfdghjfjdsjdfhd哈哈哈哈大会的哈哈哈大会是否收到回复",
      worksImg: [
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg",
        "http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg",
      ],
      i: 1, //控制点赞与取消点赞
      myimg: "https://img01.yzcdn.cn/vant/cat.jpeg",
      write: "",

      //中部弹出更多弹框
      showMore: false,

      //底部弹出分享作品面板
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    dianzan() {
      this.i++;
    },
    del() {
      this.showMore = false;
      this.$dialog
        .confirm({
          message: "确认要删除么?",
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    edit() {
      this.$router.push("/uploadworks");
    },
    cancel() {
      this.showMore = false;
    },
  },
  mounted() {
    this.axios.get(`/works/getWorks`).then((res) => {
      console.log(res.data.result);
      //  this.uname= res.data.result.uname;
      //  console.log(res.data.result.uname);
      // this.headimg= res.data.result.headimg;
      //  this.text= res.data.result.wdes;
      // this.wdatetime= res.data.result.wdatetime; //2021-06-08T16:00:00.000Z
      // this.worksImg= res.data.result.wpic; //http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan.jpg,http://qxkmdhmin.hn-bkt.clouddn.com/yuyuan2.jpg
    });
  },
};
</script>

<style lang="scss">
.home {
  padding: 0 0.4rem;
  .attentionList {
    margin: 2.5rem 0.5rem;
    .authorimg {
      vertical-align: middle;
      margin-right: 0.5rem;
    }
    .nicheng {
      font-weight: 700;
      font-size: 18px;
      font-family: "微软雅黑";
    }
    .text {
      font-size: 18px;
      margin: 0.5rem 0;
      word-wrap: break-word; /*自动换行*/
      line-height: 2rem;
    }
    .workImg {
      width: 31.5%;
      margin: 0 6px 6px 0;
      border-radius: 5px;
    }
    //点赞与评论区
    .dianping {
      padding-bottom: 1rem;
      border-bottom: 1px solid #cccc;
      span {
        margin-left: 0.4rem;
      }
    }
    .dianzan {
      width: 23px;
    }
    .comment {
      margin-top: 1rem;
      .myimg {
        margin-top: 0.5rem;
      }
      .write {
        position: relative;
        input {
          width: 280px;
          height: 36px;
          background-color: #f3f3ecdc;
          border: 0;
          border-radius: 28px;
          margin: 0.5rem 0 0 0.3rem;
          padding-left: 0.6rem;
          font-size: 12px;
        }
        img {
          width: 1.3rem;
          position: absolute;
          top: 15px;
        }
        .applause {
          right: 45px;
        }
        .heart {
          right: 10px;
        }
      }
    }

    //弹框区域
    .dialog {
      //实现块级元素居中显示
      position: absolute;
      width: 340px;
      height: 220px;
      top: 50%;
      left: 50%;
      margin-top: -110px; //高度的一半
      margin-left: -170px; //宽度的一半
      background: #fff;
      box-sizing: border-box;
      padding: 20px;
      h3 {
        height: 8vh;
        font-size: 18px;
      }
      .dialog_item {
        height: 6vh;
        .cancel {
          color: red;
          font-size: 14px;
          margin-left: 70vw;
        }
      }
    }
  }
  .van-overlay {
    background-color: rgba(0, 0, 0, 0.4); //修改遮罩层的背景色
  }
}
</style>